<!--
 * @Author: Hzh
 * @Date: 2021-04-23 10:13:38
 * @LastEditTime: 2021-04-23 15:47:58
 * @LastEditors: Hzh
 * @Description:
-->
<template>
  <div class="home">
    <div class="ZSPX_title">知识培训</div>
    <div class="ZSPX_content">
      <!-- 小标题 -->
      <div class="ZSPX_content_title">
        <div class="ZSPX_content_title_item ZSPX_content_title_itemBIG"
          :style="nowShow === 0 ? `background-image: url('${big_active}');` : ''" @click="clickToActive(0)">故障报告管理</div>
        <div class="ZSPX_content_title_item ZSPX_content_title_itemSmall"
          :style="nowShow === 1 ? `background-image: url('${small_active}');` : ''" @click="clickToActive(1)">培训资料</div>
        <div class="ZSPX_content_title_item ZSPX_content_title_itemSmall"
          :style="nowShow === 2 ? `background-image: url('${small_active}');` : ''" @click="clickToActive(2)">培训视频</div>
      </div>
      <!-- 搜索框 -->
      <div class="ZSPX_content_middle">
        <el-input v-model="input" placeholder="搜索"></el-input>
        <img class="search_icon" src="../assets/ZSPX_icon.png" alt="">
      </div>
      <!-- 资料 -->
      <div class="peiXunZiLiao">
        <!-- 资料的每一项 -->
        <div class="peiXunZiLiao_item" v-for="(item, index) in ZSPX_ziLiao" :key="index">
          <!-- 图片 -->
          <img :src="`${item.bgc_url}`" alt="">
          <!-- 文字 -->
          <div class="PXZL_wenZi">{{ item.value }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import small_active from '../assets/ZSPX_contentTitleSmall_xuanZhong.png'
import big_active from '../assets/ZSPX_contentTitleBiG_xuanZhong.png'
import ziLiao_1 from '../assets/ziLiao_1.png'
import ziLiao_2 from '../assets/ziLiao_2.png'
import ziLiao_3 from '../assets/ziLiao_3.png'
import ziLiao_4 from '../assets/ziLiao_4.png'
import ziLiao_5 from '../assets/ziLiao_5.png'
import ziLiao_6 from '../assets/ziLiao_6.png'
import ziLiao_7 from '../assets/ziLiao_7.png'
export default {
  name: "Home",
  data() {
    return {
      // 培训资料的图片，共7个
      ziLiao_1,
      ziLiao_2,
      ziLiao_3,
      ziLiao_4,
      ziLiao_5,
      ziLiao_6,
      ziLiao_7,
      // 知识培训的资料
      ZSPX_ziLiao: [
        {
          bgc_url: ziLiao_1,
          value: '六氟化硫高压断路器状态检修导则'
        },
        {
          bgc_url: ziLiao_2,
          value: '六氟化硫高压断路器状态评价导则'
        },
        {
          bgc_url: ziLiao_3,
          value: '国家电网公司GIS及交流开关故障汇编'
        },
        {
          bgc_url: ziLiao_4,
          value: '主设备故障应急处置指导意见'
        },
        {
          bgc_url: ziLiao_5,
          value: '气体绝缘金属封闭开关设备状态检修导则'
        },
        {
          bgc_url: ziLiao_6,
          value: '气体绝缘金属封闭开关设备状评级导则'
        },
        {
          bgc_url: ziLiao_7,
          value: 'GIS和交流开关设备台账技术规范'
        },
      ],
      // 控制当前点击是谁
      nowShow: 1,
      // 130的active的背景图
      big_active,
      // 110的active的背景图
      small_active,
      //搜索框的变量
      input: ''
    }
  },
  components: {},
  mounted() { },
  methods: {
    // 知识培训按钮的点击事件
    clickToActive(i) {
      this.nowShow = i
    }
  }
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

.home {
  width: 608px;
  height: 592px;
  background: url("../assets/ZSPX_bg.png") no-repeat;

  // 大标题
  .ZSPX_title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-size: 20px;
    text-align: left;
    padding-left: 56px;
  }

  // 内容
  .ZSPX_content {
    width: 100%;
    height: 552px;
    padding-left: 20px;
    padding-top: 12px;
    // background-color: pink;

    // 小标题
    .ZSPX_content_title {
      display: flex;
      width: 564px;
      height: 27px;
      line-height: 27px;
      color: #40e5f0;
      background: url('../assets/ZSPX_content_titleBG.png') no-repeat;
      padding-left: 25px;

      // 每一个小标题
      .ZSPX_content_title_item {
        height: 27px;
        line-height: 27px;
        cursor: pointer;
      }

      // 130的标题
      .ZSPX_content_title_itemBIG {
        width: 130px;
        background: url('../assets/ZSPX_contentTitleBiG_default.png') no-repeat;
      }

      // 110的标题
      .ZSPX_content_title_itemSmall {
        width: 110px;
        background: url('../assets/ZSPX_contentTitleSmall_default.png') no-repeat;
      }
    }

    /* 搜索框的样式 */
    .ZSPX_content_middle {
      height: 25px;
      // background-color: pink;
      position: relative;
      width: 145px;
      margin-left: 426px;
      color: #fff;

      /* 搜索的icon */
      .search_icon {
        position: absolute;
        right: 9px;
        top: 6px;
      }
    }

    // 知识培训的资料
    .peiXunZiLiao {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      width: 532px;
      height: 420px;
      // background-color: pink;
      margin-top: 15px;


      // 资料的每一项
      .peiXunZiLiao_item {
        width: 106px;
        height: 156px;

        // background-color: yellow;
        // 图片
        img {
          width: 97px;
          height: 130px;
          background-color: yellow;
        }

        // 文字
        .PXZL_wenZi {
          width: 100%;
          height: 26px;
          line-height: 26px;
          // background-color: green;
          font-size: 14px;
          color: #fff;
        }
      }
    }
  }

  // element的搜索框
  ::v-deep .el-input {
    width: 145px;
    height: 25px;
    color: #fff;

    .el-input__inner {
      width: 100%;
      height: 25px;
      background-color: #202f3e;
      border: 1px solid #40486a;
      border-radius: 0;
      color: #fff;

    }
  }
}
</style>